import React, { Component } from 'react';
import { AppRegistry,StyleSheet, ListView, Text, View,Image,TextInput,Picker,TouchableOpacity } from 'react-native';

import ScrollableTabView from 'react-native-scrollable-tab-view';

export default class Anwser extends Component {
  // 初始化模拟数据
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      language:'',
      dataSource: ds.cloneWithRows([
        {'id':1,'time':'2017-4-23','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题第一个问题！','tag':'标签一','like':899,'mark':234},
        {'id':2,'time':'2017-4-23','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第2个问题！','tag':'标签2','like':29,'mark':234},
        {'id':3,'time':'2017-4-29','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第3个问题！','tag':'标签3','like':499,'mark':234},
        {'id':4,'time':'2017-6-13','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第4个问题！','tag':'标签4','like':859,'mark':234},
        {'id':5,'time':'2017-2-23','icon':'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSay0J-SiRlvJAQ6_QrqADfZ0SIjhT2s_FFQntJQNlJqRAGzy0vrpgNfRo','topic':'第5个问题！','tag':'标签5','like':210,'mark':234}
      ])
    };
  }
  render() {
    return (
      <View style={{flex: 1,backgroundColor:'#f5f5f5'}}>
         <View style={{height:45,backgroundColor:'black',flexDirection:'row'}}>
             <View style={{flex:1,alignItems:'center',justifyContent:'center'}}>
                <Text style={{fontSize:18,color:'white',alignSelf:'center'}}>我的提问</Text>
             </View>
        </View>
        <ScrollableTabView>
          <View tabLabel='写问题'>
            <View style={{flexDirection: 'row',}}>
              <Text style={{flex:1,textAlignVertical:'center',textAlign:'center'}}>选择标签:</Text>
              <Picker
                  style={styles.picker}
                  selectedValue={this.state.language}
                  onValueChange={(value) =>this.setState({language: value})}>
                  <Picker.Item label="标签一" value="tag1" />
                  <Picker.Item label="标签二" value="tag2" />
              </Picker>
            </View>
            <TextInput
                 style={styles.question}
                 placeholder="留下你的问题吧，注意不要超过200字哦！"
                 placeholderTextColor="#aaaaaa"
                 ref={'question'}
                 multiline={true}
                 autoFocus={true}
                 maxLength ={200}
                 underlineColorAndroid={'transparent'}//输入框的线框为透明
                 onChangeText={(text) => {
                    question = text;
                 }}
            />
            <TouchableOpacity style={{height:45,backgroundColor:'#51a1e6',margin:10,justifyContent:'center',borderRadius:3}}>
                <Text style={{alignSelf:'center',color:'white'}}>提交</Text>
            </TouchableOpacity>
          </View>
          <View tabLabel='我的问题'>
            <ListView
              dataSource={this.state.dataSource}
              renderRow={(rowData) =>
                <View style={styles.item}>
                  <View style={styles.authorItem}>
                        <Text style={styles.author}>提问时间:{rowData.time}</Text>
                  </View>
                  <Text style={styles.topicItem}>{rowData.topic}</Text>
                  <View style={styles.likeItem}>
                      <Image style={styles.personIcon} source={require('../images/heat.png')}/>
                      <Text style={styles.like}>{rowData.like}</Text>
                      <Image style={styles.personIcon} source={require('../images/mark.png')}/>
                      <Text style={styles.like}>{rowData.mark}</Text>
                  </View>
                </View>}
            />
          </View>
        </ScrollableTabView>
     </View>
    );
  }
}
const styles = StyleSheet.create({
    picker:{
       flex:4,
       backgroundColor:'white',
       height:30,
       margin:10,
       borderRadius:4
    },
    item:{
        flexDirection: 'row',
        borderWidth: 1,
        borderColor: 'black',
        flexDirection: 'column',
        backgroundColor:'white'
    },
    authorItem:{
        padding:0,
        height: 30,
        flexDirection: 'row',
    },
    personIcon:{
        width:30,
        height:30,
        borderWidth: 1,
        borderColor: '#F5F5F5',
    },
    author:{
        fontSize:16,
        lineHeight:30
    },
    topicItem:{
        padding:10,
        fontSize:16
    },
    likeItem:{
        flexDirection: 'column',
        height: 40,
        flexDirection: 'row',
        marginRight:10
    },
    like:{
        marginLeft:10,
        lineHeight:30
    },
    question:{
        height:300,
        fontSize: 15,
        borderColor:'gray',
        textAlignVertical :'top',
        paddingTop:10,
        backgroundColor:'white',
        margin:5,
        borderWidth:1,
        borderRadius:2
    }
});
